<template>
  <div class="example">
    <div class="part">
      <div class="title">
        <span class="number">4</span>
        <span class="name titleName">Token API</span>
      </div>
      <div class="cont">
        Token API is used to generate dynamic token for getting authorization before any real business API call.
      </div>
    </div>
    <div class="part">
      <div class="title">
        <span class="number">4.1</span>
        <span class="name">Request Field Definitions</span>
      </div>
      <div class="table1">
        <el-table
          :data="tableData1"
          border>
          <el-table-column
            prop="FieldName"
            label="FieldName"
            width="245">
          </el-table-column>
          <el-table-column
            prop="FieldDefinition"
            label="FieldDefinition"
            width="325">
          </el-table-column>
          <el-table-column
            prop="FieldType"
            label="FieldType"
            width="245">
          </el-table-column>
          <el-table-column
            prop="Comments"
            label="Comments"
            width="325">
          </el-table-column>
        </el-table>
      </div>
      <div class="json">
        <div style="margin-top: 10px">
          <div class="title">Example</div>
          <span class="url">{{RequestData.url}}</span>
        </div>
        <div style="margin-top: 10px">
          <div class="title">Http header</div>
          <span>{{RequestData.http}}</span>
          <span>Consumer Key</span>
          <span>fVr0CKudufOSfeiGEhAzmKPBQ28a</span>
          <span>Consumer Secret</span>
          <span>BHyU3HpBswlY7fv9_RGnPqnsoEAa</span>
        </div>
        <div style="margin-top: 10px">
          <div class="title">Payload:</div>
          <span>Content-Type: application/x-www-form-urlencoded</span>
          <span>grant_type=client_credentials</span>
        </div>
      </div>
    </div>
    <div class="part">
      <div class="title">
        <span class="number">4.2</span>
        <span class="name">API Response parameters</span>
      </div>
      <div class="table1">
        <el-table
          :data="tableData2"
          border>
          <el-table-column
            prop="FieldName"
            label="FieldName"
            width="245">
          </el-table-column>
          <el-table-column
            prop="FieldDefinition"
            label="FieldDefinition"
            width="325">
          </el-table-column>
          <el-table-column
            prop="FieldType"
            label="FieldType"
            width="245">
          </el-table-column>
          <el-table-column
            prop="Comments"
            label="Comments"
            width="325">
          </el-table-column>
        </el-table>
      </div>
      <div class="json">
        <div style="margin-top: 10px">
          <div class="title">Response Sample:</div>
          <pre>{{ResponseData.json}}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Example",
    data() {
      return {
        tableData1: [{
          FieldName: 'Grant Type',
          FieldDefinition: 'grant_type',
          FieldType: 'String',
          Comments: 'default value: client_credentials',
        }, {
          FieldName: 'Consumer Key',
          FieldDefinition: 'ConsumerKey',
          FieldType: 'String',
          Comments: 'Consumer Key assigned by Lenovo API Admin',
        }, {
          FieldName: 'Consumer Secret',
          FieldDefinition: 'ConsumerSecret',
          FieldType: 'String',
          Comments: 'Consumer Secret assigned by Lenovo API Admin',
        }, {
          FieldName: 'Content-Type',
          FieldDefinition: 'application/x-www-form-urlencoded',
          FieldType: 'String',
          Comments: 'Content-Type is set in http header',
        },
          {
            FieldName: 'Authorization',
            FieldDefinition: 'ConsumerKey:ConsumerSecret',
            FieldType: 'String',
            Comments: 'Content-Type is set in http header Sample:Authorization lLQnUaRRmXerDb9PDtz8QRYNfxAa : o9qmPJDlzXVdmyIm1pQf1hZqkqIa',
          }],
        tableData2: [{
          FieldName: 'Authorization Scope',
          FieldDefinition: 'scope',
          FieldType: 'String',
          Comments: 'Default',
        }, {
          FieldName: 'Token Type',
          FieldDefinition: 'token_type',
          FieldType: 'String',
          Comments: 'Default: Bearer',
        }, {
          FieldName: 'Token Expire time',
          FieldDefinition: 'expires_in',
          FieldType: 'Integer',
          Comments: 'Default: 3600 seconds',
        }, {
          FieldName: 'Access Token',
          FieldDefinition: 'access_token',
          FieldType: 'String',
          Comments: 'This token will be expired per 3600 seconds',
        },
          {
            FieldName: 'Authorization',
            FieldDefinition: 'ConsumerKey:ConsumerSecret',
            FieldType: 'String',
            Comments: 'Content-Type is set in http header Sample:Authorization lLQnUaRRmXerDb9PDtz8QRYNfxAa : o9qmPJDlzXVdmyIm1pQf1hZqkqIa',
          }],
        RequestData: {
          url: 'https://soa-test.lenovo.com/api/oauth2/token',
          http: 'Authorization:',

        },
        ResponseData:{
            json:{
              "access_token": "af08685f-a86d-348b-b8c7-fff9871c9977",
              "scope": "am_application_scope default",
              "token_type": "Bearer",
              "expires_in": 1490
            }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .example {
    margin: 10px 41px 0 41px;
    .part {
      margin: 30px 0;
      .title {
        margin: 10px;
        font-weight: bold;
        .number {
          font-size: 20px;
          color: #0090e9;
          margin-right: 10px;
        }
        .name {
          font-size: 20px;
          color: #000;
        }
        .titleName {
          font-size: 24px;
        }
      }
      .cont {
        font-size: 16px;
        line-height: 24px;
      }
      .json {
        .url {
          color: #0090e9;
          cursor: pointer;
        }
        .url:hover {
          text-decoration: underline;
        }
        .title{
          font-weight: bold;
        }
      span{
        display: block;
        margin-left: 10px;
      }
      }
      .table1 {
        width: 1142px;
      }
      .table2 {
        width: 880px;
      }
    }
  }

</style>
